.ararin-button {
    position: relative;
    display: block;
    font-weight: $btn-font-weight;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    border: $btn-border-width solid transparent;
    outline: none;
    padding: .05rem .08rem;
    transition: $btn-transition;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: $box-shadow-default;
    border-radius: .05rem;
    letter-spacing: .01rem;
    .ararin-button-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;    
    }
    &.disabled,
    &[disabled] {
        cursor: not-allowed;
        opacity: $btn-disabled-opacity;
        box-shadow: none;
        pointer-events: none;
        > * {
            pointer-events: none;
        }
    }
}

.ararin-button-lg {
    @include button-size($font-size-lg, $line-height-lg);
}

.ararin-button-md {
    @include button-size($font-size-base, $line-height-base);
}

.ararin-button-sm {
    @include button-size($font-size-sm, $line-height-sm);
}


@each $key, $val in $theme-colors {
    @if $key == 'default' {
        .ararin-button-#{$key} {
            @include button-style($gray-600, lighten($val, 10%), $btn-border-color);
        }
        .ararin-button-#{$key}.ararin-button-loading {
            box-shadow: 0 0vw .04rem darken($color: $val, $amount: 10%);
        }
        .ararin-button-#{$key}-active {
            background-color: darken($color: $val, $amount: 10%);
        }
    }
    @else if $key == 'text' {
        .ararin-button-#{$key} {
            @include button-style($blue, transparent, transparent);
            box-shadow: none;
        }
        .ararin-button-#{$key}.ararin-button-loading {
            box-shadow: none;
        }
        .ararin-button-#{$key}-active {
            background-color: transparent;
        }
    }
    @else if $key != 'default' && $key != 'text' {
        .ararin-button-#{$key} {
            @include button-style($white, $val);
        }
        .ararin-button-#{$key}-active {
            @include button-style($white, darken($color: $val, $amount: 10%));
        }
        .ararin-button-#{$key}.ararin-button-loading {
            box-shadow: 0 0 .04rem darken($color: $val, $amount: 10%);
        }
    }
}


.ararin-btn-ripple {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.ararin-button-loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ararin-ripple-bg {
    position: relative;
}

.test-enter, .test-appear {
    opacity: 0;
    margin-right: -1vw;
}
//enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行
.test-enter-active, .test-appear-active { 
    opacity: 1;
    transition: opacity 1s ease-out,margin-right 1s ease-out;
    margin-right: 3vw;
}
//入场动画执行完毕后，保持状态
.test-enter-done {
    opacity: 1;
    margin-right: 3vw;
}
//同理，出场前的一刹那，以下就不详细解释了，一样的道理
.test-exit {
    opacity: 1;
    margin-right: 3vw;
}

.test-exit-active {
    opacity: 0;
    transition: opacity 1s ease-out,margin-right 1s ease-out;
    margin-right: 0vw;
}

.test-exit-done {
    opacity: 0;
    margin-right: 0vw;
}


.ararin-button-ripple{
    position:relative;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
    text-align: center;
    -webkit-tap-highlight-color:transparent;
    z-index:1;
    justify-content: center;
    align-items: center;
    display: flex;
}
.ararin-button-ripple .ararin-button-ripple-animation {
    position:absolute;
    border-radius:50%;
    opacity:0;
    // background:rgba(255,255,255,0.1);
    transition:all 0.7s ease-out;
    transition-property:transform, opacity, -webkit-transform;
    -webkit-transform:scale(0);
    transform:scale(0);
    pointer-events:none
}
// .ts-btn{
//     width: 200px;
//     height: 56px;
//     line-height: 56px;
//     background: #f57035;
//     color: #fff;
//     border-radius: 5px;
// }